'use strict'
import React from 'react'
import style from './css.css'
import { View, Button } from '../../component'
class FailResult extends React.Component {
  static propTypes = {
    handClose: PropTypes.func,
    tap: PropTypes.func
  }
  state = {
    time: 5
  }
  _handleStart = this._handleStart.bind(this)
  timeFlag = null
  componentDidMount () {
    this.timeFlag = setInterval(() => {
      let { time } = this.state
      time -= 1
      this.setState({ time })
      if (time === 0) {
        clearInterval(this.timeFlag)
        this.timeFlag = null
        this.props.handClose()
      }
    }, 1000)
  }
  componentWillUnmount () {
    if (this.timeFlag) {
      clearInterval(this.timeFlag)
      this.timeFlag = null
    }
  }
  _handleStart () {
    this.props.handClose()
    this.props.tap()
  }
  _renderBtn () {
    const { time } = this.state
    if (time > 0) {
      return (
        <Button tap={ this._handleStart } key={0} tapClassName={style.resultBtnPress} className={ style.resultBtn}>再来一次({ time }s)</Button>
      )
    }
    else {
      return (
        <Button key={1} className={ style.resultBtnGray}>再来一次</Button>
      )
    }
  }
  render () {
    return (
      <View className={ style.failResult}>
        <View className={ style.failResultText}>据说换个姿势，手气会更好!</View>
        { this._renderBtn() }
        <Button tap={this.props.handClose} tapClassName={style.closePress } className={ style.close}></Button>
      </View>
    )
  }
}

export default FailResult
